<template>
	<view>
		<view class="ShoppingCart">
			 <!-- 全选 -->
			    <div>
			      <p
			        style="font-size: 0.8rem;margin: 1rem"
			        align="left"
			      >共{{Cart.length}}件商品</p>
			    </div>
			    <div  v-for="items in Cart"
			          class="ShoppingCart-content" >
			      <div style="margin-left:1rem;" align="left">
			        <van-icon
			          name="shop-o"
			          size="15"/>
			        <span style="">{{items.shopsName}}</span>
			        <!--<span style="color: red;font-size: 0.8rem;position: absolute;right: 0.1rem;margin-right: 1rem">领券</span>-->
			      </div>
			      <van-checkbox-group v-model="result" ref="checkboxGroup">
			        <van-checkbox :name="items">
			          <div style="margin: 0.5rem 0">
			            <!-- 左对齐 -->
			            <van-row type="flex">
			              <van-col span="6"> 
			                <image
			                  style="width:5rem;height:5rem;"
			                  fit="cover"
			                  :src="items.picUrl"
			                ></image>
			              </van-col>
			              <van-col span="15" >
			                <p
			                  style="font-size: 0.8rem;"
			                  align="left"
			                >{{items.labelName}}</p>
			                <p
			                  style="font-size: 0.6rem;padding-top: 1rem"
			                  align="left"
			                >
			                  <van-row gutter="20">
			                    <van-col span="12">
			                      <span style="color: #999999;">{{items.descript}}</span>
			                    </van-col>
			                    <van-col
			                      span="7"
			                      style="width:180rpx"
			                    >
			                      <span style="font-size: 0.8rem">￥{{items.labelPrice}}</span>
			                    </van-col>
			                    <van-col span="5">
			                      <span style="font-size: 0.8rem">×{{items.productNumber}}</span>
			                    </van-col>
			                  </van-row>
			                </p>
			              </van-col>
			            </van-row>
			          </div>
			        </van-checkbox>
			      </van-checkbox-group>
			    </div>
			    <van-submit-bar :price="money" button-text="提交订单" @submit="onSubmit">
					<checkbox-group @click="quanXuan()">
						<label>
							<checkbox :checked="checked" color="#0570DB" style="transform:scale(0.8)" />全选
						</label>
					</checkbox-group>
			    </van-submit-bar>
		</view>
	</view>
</template>

<script>
	  import { getShopping } from "../../api/commodity/shop_cart.js"
	  import { selectOrderShoppingCart } from '../../api/commodity/shopping_cart.js'
	  import { Toast } from "vant";  
	  export default {
	    data () {
	      return {
	        //全选
	        checked:false,
	        //金额
	        money:0,
	        //购物车选中物品集合
	        result:[],
	        //购物车的所有商品集合
	        Cart:[],
	  
	      }
	    },
	    //监听选中购物车商品
	    watch:{
	      result:{
	        handler(newVal) {
	          console.log(JSON.stringify(newVal),"11111111");
	          if(newVal.length != 0){
	            if(newVal.length == this.Cart.length){
	              this.checked = true;
	            }else {
	              this.checked = false;
	            };
	          }else{
				  this.checked = false;  
			  }
	          this.money = 0;
	          newVal.forEach(item => {
	            console.log(JSON.stringify(item),"6666");
	            this.money = this.money + (item.labelPrice*item.productNumber*100);
	          })
	        },
	        immediate: true,
	      },
	    },
	    methods: {
	      //全选（使用中）
	      quanXuan(){
			  if(this.checked==false){
				  this.checked = true;
				  this.result = this.Cart;
			  }else if(this.checked==true){
				  this.checked = false;
				  this.result = [];
			  }
	      },
	      // 提交
	      onSubmit () {
	        if(this.result.length>0){
	          sessionStorage.setItem('resultList',JSON.stringify(this.result));
			  uni.navigateTo({
			  	url:'/pages/shoppingCartDetails/shoppingCartDetails'
			  });
	        }else {
	          Toast({
	            message: "请选择商品",
	            position: "top",
	          });
	        }
	      },
	      //查询购物车列表
	      getSelectOrderShoppingCart(){
	        selectOrderShoppingCart().then((res)=>{
	          this.Cart = res.data.data;
	        })
	      },
	  
	    },
	    //页面渲染前加载
	    created() {
	      this.getSelectOrderShoppingCart();
	    },
}	 
</script>

<style>
	.navbar .demo-nav__back {
	  position: absolute;
	  top: 50%;
	  left: 32rpx;
	  width: 48rpx;
	  transform: translateY(-50%);
	  height: 48rpx;
	  cursor: pointer;
	}
	
	.navbar .jinru {
	  height: 100%;
	}
	
	.navbar {
	  width: 100%;
	  height: 88rpx;
	  background-color: #ffffff;
	  border-bottom: 2rpx solid rgba(239, 239, 239, 100);
	  position: relative;
	  line-height: 88rpx;
	}
	  .ShoppingCart-content{
	    margin-bottom: 20rpx;
	  }
	  .ShoppingCart{
	    margin-bottom: 100rpx;
	  }
</style>